<template>
    <div>
        <el-form :inline="true">
            <el-form-item style="float: right;">
                <el-button type="primary" @click="dialogVisible.add = true">添加菜单</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="menuId" border default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="menuName" label="菜单名称" sortable align="center">
            </el-table-column>
            <el-table-column prop="menuCode" label="菜单编号" sortable align="center">
            </el-table-column>
            <el-table-column prop="menuType" label="菜单类型" sortable align="center">
                <template slot-scope="scope">
                    {{formatMenuType(scope.row.menuType)}}
                </template>
            </el-table-column>
            <el-table-column prop="componentPath" label="组件路径" sortable align="center">
                <template slot-scope="scope">
                    {{scope.row.componentPath==null?"-":scope.row.componentPath}}
                </template>
            </el-table-column>
            <el-table-column prop="routePath" label="路由地址" sortable align="center">
                <template slot-scope="scope">
                    {{scope.row.routePath==null?"-":scope.row.routePath}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="260">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" @click="CreateSubMenu(scope.$index, scope.row)">添加子菜单
                    </el-button>
                    <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog width="50%" v-if="dialogVisible.add" :destroy-on-close="true" :visible.sync="dialogVisible.add">
            <span slot="title">添加菜单</span>
            <menu-add ref="menuAdd" :menuData="tableData" :menuType="menuType" :rowData="rowData" @OnSave="SaveSucess">
            </menu-add>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible.add = false">取 消</el-button>
                <el-button type="primary" @click="$refs.menuAdd.submitForm('ruleForm')">保 存</el-button>
            </span>
        </el-dialog>
        <el-dialog width="50%" v-if="dialogVisible.edit" :destroy-on-close="true" :visible.sync="dialogVisible.edit">
            <span slot="title">编辑菜单</span>
            <menu-edit ref="menuEdit" :menuData="tableData" :menuType="menuType" :rowData="rowData"
                @OnSave="SaveSucess"></menu-edit>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible.edit = false">取 消</el-button>
                <el-button type="primary" @click="$refs.menuEdit.submitForm('ruleForm')">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { Query, Delete } from '../../api/menu';
    import menuAdd from './menuAdd';
    import menuEdit from './menuEdit';
    export default {
        name: 'RbacUiMenu',
        components: {
            menuAdd,
            menuEdit
        },
        data() {
            return {
                tableData: [],
                menuType: [
                    {
                        id: 1,
                        typeName: "目录"
                    },
                    {
                        id: 2,
                        typeName: "菜单"
                    },
                    {
                        id: 3,
                        typeName: "按钮"
                    }
                ],
                dialogVisible: {
                    add: false,
                    edit: false
                },
                rowData: {}
            };
        },

        mounted() {
            this.initData();
        },

        methods: {
            initData() {
                Query().then(m => {
                    this.tableData = m.data;
                });
            },
            handleEdit(index, row) {
                this.rowData = row;
                this.dialogVisible.edit = true;
            },
            formatMenuType(type) {
                return this.menuType.find((v, i, arr) => v.id == type).typeName;
            },
            handleDelete(index, row) {
                let _this = this;
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    Delete({ menuId: row.menuId }).then(res => {
                        if (res.data.code == 0) {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        } else {
                            this.initData();
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            SaveSucess(res, formName) {
                formName == 'add' ? this.dialogVisible.add = false : this.dialogVisible.edit = false;
                this.initData();
            },
            CreateSubMenu(index, row) {
                this.rowData = row;
                this.dialogVisible.add = true;
            }
        },
    };
</script>